<template>
  <div class="myOrderList">
    <ContentBox title="商家订单列表" @left="back" :fixed="true" :ostyle="style" titlecolor="#000000">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <van-tabs
      v-model="showView"
      class="order_content"
      :swipe-threshold="6"
      :scrollspy="true"
      :swipeable="true"
      :animated="true"
      background="#F0F0F0"
      color="#FF2A1F"
      title-active-color="#FF2A1F"
      title-inactive-color="#666666"
      @change="changeTab"
    >
      <van-tab :title="item" v-for="(item, index) in navList" :key="index">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="true"
        >
          <van-cell v-for="(item, index) in orderList" :key="index" class="order-table">
            <div class="order-list">
              <div class="item-container" @click="toDetail(item.cartInfo[0].productInfo.id)">
                <van-image :src="item.cartInfo[0].productInfo.image">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error></template>
                </van-image>
                <div>
                  <div class="ellipsis">
                    <div class="detail">{{item.cartInfo[0].productInfo.store_name}}</div>
                    <div class="money">
                      <p class="price"><i>￥</i>{{item.cartInfo[0].productInfo.price}}<br/><span>X{{item.cartInfo[0].cart_num}}</span></p>
                    </div>
                  </div>
                  <p class="info">商品规格: {{item.cartInfo[0].productInfo.attrInfo ? item.cartInfo[0].productInfo.attrInfo.suk : ''}}</p>
                </div>
              </div>
              <div class="contact">共{{item.total_num}}件商品， 合计￥{{item.total_price}}</div>
              <div class="item-btn">
                <span class="item-btn-huise" v-if="showView == 3" @click="toWL(item.order_id)">查看物流</span>
                <span class="item-btn-huise" @click="cancelOrder(item.order_id)" v-if="showView == 0">取消订单</span>
                <span v-if="showView == 0" @click="openPay(item.order_id, index)">付款</span>
                <span class="item-btn-huise" v-if="showView == 2" @click="txfh(item.order_id)">提醒发货</span>
                <span v-if="showView == 3" @click="qrsh(item.order_id)">确认收货</span>
                <span class="item-btn-huise" v-if="showView == 4" @click="toorderpl(item.cartInfo[0].unique)">评价晒单</span>
                <span class="item-btn-huise" v-if="showView == 5 && item.refund_status === 0" @click="sqtk(item.order_id)">申请退款</span>
                <span class="item-btn-huise" v-if="showView == 5 && item.refund_status === 1">退款中</span>
                <span class="item-btn-huise" v-if="showView == 5 && item.refund_status === 2">已退款</span>
                <span class="item-btn-huise" v-if="showView == 1">邀请</span>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <van-action-sheet v-model="show" title="选择支付方式">
      <van-radio-group v-model="radio" class="pay_type">
        <div class="pay yue" @click="radio = 'yue'">
          <van-icon :name="$img('yuepay.png')" size=".64rem"/>
          <span>余额支付</span>
          <van-radio name="yue" checked-color="#E0261B"></van-radio>
        </div>
        <div class="pay alipay" @click="radio = 'alipay'" v-if="!$isWxBrowser()">
          <van-icon :name="$img('alipay.png')" size=".64rem"/>
          <span>支付宝支付</span>
          <van-radio name="alipay" checked-color="#1880bd"></van-radio>
        </div>
        <div class="pay wechat" @click="radio = 'wechatApp'">
          <van-icon :name="$img('wxpay.png')" size=".64rem"/>
          <span>微信支付</span>
          <van-radio name="wechatApp" checked-color="#008000"></van-radio>
        </div>
      </van-radio-group>
      <div class="toBuy" @click="toPay">立刻支付</div>
    </van-action-sheet>
    <van-overlay :show="passwordShow" :z-index="3000">
      <div class="passwordcancel" @click="passwordcancel">
        <van-icon name="cross" size=".64rem" color="#ffffff"/>
      </div>
      <van-password-input
        :value="password"
        info="请输入 6 位数密码"
        :focused="showKeyboard"
        :gutter="10"
        @focus="showKeyboard = true"
        class="inpPassWord"
      />
      <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
      />
    </van-overlay>
    <van-overlay :show="loadingShow" class="loading" z-index="4000">
      <van-loading size="2.4rem" :vertical="true"></van-loading>
    </van-overlay>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['uifo'])
  },
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000000'
      },
      showView: 0,
      orderList: [],
      loading: false,
      finished: false,
      navList: ['全部', '待付款', '待发货', '待收货', '待评价', '已完成'],
      silder: '',
      page: 1,
      last_page: 100,
      orderType: [0, 5, 1, 2, 3, 4],
      show: false,
      radio: 'yue',
      oId: '',
      showKeyboard: false,
      passwordShow: false,
      loadingShow: false,
      password: '',
      index: ''
    }
  },
  watch: {
    password (val) {
      if (val.length === 6) {
        this.showKeyboard = false
        this.passwordShow = false
        this.loadingShow = true
        this.orderPay(this.oId, val).then(res => {
          if (res.status === 200) {
            this.loadingShow = false
            this.$toast.success('支付成功')
            this.page = 1
            this.last_page = 100
            this.getOrderList()
          }
        })
      }
    }
  },
  methods: {
    onLoad () {
      if (this.page >= this.last_page) {
        this.finished = true
        this.loading = false
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get('/api/merchant/order', {
          params: {
            type: this.orderType[this.showView],
            page: this.page,
            limit: 10
          }
        }).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            this.orderList = this.orderList.concat(res.data.data)
          }
          this.loading = false
          this.finished = true
        })
      })
    },
    right () {
      console.log('右边事件')
    },
    getOrderList () {
      this.finished = true
      this.$axios.get('/api/merchant/order', {
        params: {
          type: this.orderType[this.showView],
          page: this.page,
          limit: 10
        }
      }).then(res => {
        if (res.status === 200) {
          this.last_page = res.data.last_page
          this.orderList = res.data.data
        }
      })
    },
    changeTab () {
      this.loading = false
      this.finished = false
      this.page = 1
      this.silder = this.navList[this.showView]
      this.getOrderList()
    },
    onDelete () {
      this.password = this.password.slice(0, this.password.length - 1)
    },
    onInput (key) {
      this.password = (this.password + key).slice(0, 6)
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    },
    passwordcancel () {
      this.password = ''
      this.showKeyboard = false
      this.passwordShow = false
    },
    orderPay (orderid, psw) {
      return new Promise(resolve => {
        this.$axios.post('/api/order/pay', {
          uni: orderid,
          paytype: this.radio === 'wechatApp' ? 'wechat' : 'yue',
          from: 'weixinh5',
          payment_pwd: psw
        }).then(res => {
          if (res.status === 200) {
            resolve(res)
          } else {
            this.loadingShow = false
            this.$dialog({ message: res.msg })
          }
        })
      })
    },
    openPay (id, index) {
      this.show = true
      this.oId = id
      this.index = index
    },
    toPay () {
      if (this.radio === 'yue' && this.$store.state.uifo.has_payment_pwd === 'NO') {
        this.$dialog.confirm({
          title: '提示',
          message: '当前账户尚未设置支付密码',
          confirmButtonText: '去设置'
        }).then(_ => {
          this.$router.push('/paypwd')
        })
        return false
      }
      if (this.radio === 'yue' && this.orderList[this.index].total_price > this.$store.state.uifo.now_money) {
        this.$toast('余额不足')
        return false
      }
      if (this.radio === 'yue') {
        this.password = ''
        this.showKeyboard = true
        this.passwordShow = true
        this.show = false
      } else {
        if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.toPay(this.oId, this.radio === 'alipay' ? 2 : 1)
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('toPay', {
            uni: this.oId,
            paytype: this.radio === 'alipay' ? '2' : '1'
          })
        } else if (this.$store.state.pl === 'H5') {
          if (!this.$isWxBrowser()) {
            this.$toast('请使用微信浏览器进行该操作')
            return false
          }
          this.orderPay(this.oId, '', 'weixin').then(res => {
            if (res.status === 200) {
              this.$wxChooseWXPay(res.data.result.jsConfig).then(res => {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                  this.loadingShow = false
                  this.$toast.success('支付成功')
                  this.page = 1
                  this.show = false
                  this.getOrderList()
                } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                  this.loadingShow = false
                  this.$toast.success('支付已取消')
                } else {
                  this.loadingShow = false
                  this.$toast.success('支付失败')
                }
              })
            }
          })
        }
      }
    },
    payCallBack (success) {
      this.loadingShow = false
      this.show = false
      if (success === '1') {
        this.$toast.success('支付成功')
        this.page = 1
        this.getOrderList()
      } else {
        this.$toast.success('支付已取消')
      }
    },
    back () {
      if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.switchTabBar(3)
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('switchTabBar', 3)
      }
    },
    cancelOrder (orderid) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否取消订单'
      }).then(() => {
        this.$axios.post('/api/order/cancel', {
          id: orderid
        }).then(res => {
          if (res.status === 200) {
            this.$toast('订单取消成功')
            this.page = 1
            this.getOrderList()
          } else {
            this.$toast(res.msg)
          }
        })
      }).catch(() => {
        // on cancel
      })
    },
    toorderpl (unique) {
      this.$router.push(`/orderpl/${unique}`)
    },
    qrsh (oid) {
      this.$axios.post('/api/order/take', {
        uni: oid
      }).then(res => {
        if (res.status === 200) {
          this.$toast('确认收货成功')
          this.page = 1
          this.getOrderList()
        }
      })
    },
    txfh (id) {
      this.$axios.get(`/api/store/remind_deliver/${id}`).then(res => {
        if (res.status === 200) {
          this.$toast('已提醒商家发货')
        }
      })
    },
    sqtk (id) {
      this.$router.push(`/ordertk/${id}`)
    },
    toWL (oid) {
      this.$router.push(`/orderWL/${oid}`)
    }
  },
  created () {
    if (this.$route.query.showView) {
      this.showView = parseInt(this.$route.query.showView)
    }
    this.silder = this.navList[this.showView]
    this.page = 1
    this.getOrderList()
  },
  mounted () {
    if (this.$store.state.pl === 'ANDROID') {
      window.payCallBack = success => {
        this.loadingShow = false
        this.show = false
        if (success) {
          this.$toast.success('支付成功')
          this.page = 1
          this.getOrderList()
        } else {
          this.$toast.fail('支付已取消')
        }
      }
    } else if (this.$store.state.pl === 'IOS') {
      window.iosRegisterHandler('payCallBack').then(res => {
        this.payCallBack(res)
      })
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
.myOrderList{
  & .van-tabs__content{
    height: calc(100% - .44rem);
    overflow: auto;
  }
  .pay_type{
    margin: .16rem;
    padding: .16rem .32rem .16rem .16rem;
    background: #ffffff;
    border-radius: .08rem;
    &>p{
      font-size: .28rem;
      color: #333333;
    }
  }
  .pay{
    font-size: .28rem;
    display: flex;
    align-items: center;
    margin: .24rem 0 .34rem;
    &>span{
      margin-left: .24rem;
      flex: 1;
    }
  }
  .toBuy{
    width: 100%;
    height: .96rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(92deg,rgba(254,0,0,1) 0%,rgba(255,42,86,1) 100%);
    font-size: .32rem;
    color: #ffffff;
  }
  .inpPassWord{
    margin-top: 50%;
  }
  .passwordcancel{
    padding: .36rem;
  }
  .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2100 !important;
    .van-loading__text{
      font-size: .36rem;
      font-weight: bold;
    }
  }
}
</style>
